<template>
  <div class="app-container">
    <el-tabs v-model="currentTab" type="border-card" @tab-click="changeTab">
      <el-tab-pane label="智慧车间" name="workshop">
        <el-form label-width="100px" v-hasPermi="['screen:config:query']">
          <el-form-item v-if="editFrom.publicizeUrl" label="宣传视频">
            <video
              :src="editFrom.publicizeUrl"
              controls="controls"
              controlslist="nodownload"
              class="video-preview"
            />
          </el-form-item>
          <el-form-item v-hasPermi="['screen:config:edit']" label="上传">
            <el-upload
              :action="`${baseUrl}/file/upload`"
              :limit="1"
              accept=".mp4, .m3u8"
              :headers="headers"
              :disabled="loading"
              :show-file-list="false"
              :on-progress="onProgress"
              :on-success="onSuccess"
            >
              <el-button size="small" type="primary" :loading="loading">
                {{ loading ? `上传中${percent || 0}%` : "点击上传" }}
              </el-button>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="环保数据" name="environment">
        <el-form label-width="100px" v-hasPermi="['screen:config:query']">
          <el-form-item label="链接：">
            <el-input
              v-model="editFrom.environmentUrl"
              placeholder="请输入链接"
              clearable
              style="width: 50%; margin-right: 20px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="submitForm"
              :loading="loading"
              v-hasPermi="['screen:config:edit']"
            >
              {{ loading ? "保存中" : "保 存" }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="更新频率" name="delay">
        <el-form label-width="100px">
          <el-form-item>
            <span slot="label">
              综合大屏
              <el-tooltip effect="dark" content="接口刷新频率" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>
            </span>
            <el-input
              v-model="delay"
              placeholder="默认10秒"
              type="number"
              style="width: 50%"
            >
              <span slot="suffix">秒</span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">
              车间大屏
              <el-tooltip effect="dark" content="大屏滚动和接口刷新频率" placement="top">
                <i class="el-icon-info" />
              </el-tooltip>
            </span>
            <el-input
              v-model="workDelay"
              placeholder="默认10秒"
              type="number"
              style="width: 50%"
            >
              <span slot="suffix">秒</span>
            </el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label"> 切换按钮 </span>
            <el-select v-model="arrow" style="width: 50%">
              <el-option
                v-for="item in arrowList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="saveDelay"
              v-hasPermi="['screen:period:edit']"
            >
              {{ loading ? "保存中" : "保 存" }}
            </el-button>
            <el-link disabled class="ml20">
              &lt;更新频率&gt;配置为本地保存，不会同步到云端
            </el-link>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="车间-工序" name="erp">
        <el-table
          v-hasPermi="['screen:workshop_erp_name:query']"
          :data="erpList"
          border
          stripe
          style="width: 50%"
        >
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="type" label="车间大屏名称" width="180" align="center" />
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              <div>
                工序名称
                <el-tooltip
                  effect="dark"
                  content="对应多个工序名称用英文逗号,隔开"
                  placement="top"
                >
                  <i class="el-icon-info" />
                </el-tooltip>
              </div>
            </template>
            <template slot-scope="scope">
              <el-input v-model="scope.row.erpValue" @focus="erpFocus(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">
              <el-button
                :disabled="scope.row.id !== tempData.id || scope.row.erpValue === ''"
                size="mini"
                :type="
                  scope.row.id !== tempData.id || scope.row.erpValue === ''
                    ? 'info'
                    : 'primary'
                "
                v-hasPermi="['screen:workshop_erp_name:edit']"
                @click="saveErp(scope.row)"
              >
                保存
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getRealTimeEnvironmental,
  realTimeEnvironmentalSave,
  getWorkshopErpName,
  updateWorkshopErpName,
} from "@/api/srceen/config";

export default {
  name: "other-config",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      currentTab: "workshop", // 当前tab
      loading: false, // 上传中
      percent: 0, // 上传进度
      editFrom: {},
      delay: 0, // 刷新频率
      workDelay: 0, // 车间大屏刷新频率
      arrow: "", // 车间箭头
      arrowList: [
        { label: "始终显示", value: "always" },
        { label: "悬浮显示", value: "hover" },
        { label: "不显示", value: "never" },
      ],
      erpList: [], // 车间-工序列表
      tempData: {}, // 临时文本
    };
  },
  computed: {
    ...mapGetters(["token"]),
    headers() {
      return {
        Authorization: this.token,
      };
    },
    srceenDelay() {
      return this.$store.state.app.srceenDelay;
    },
    workshopDelay() {
      return this.$store.state.app.workshopDelay;
    },
    workshopArrow() {
      return this.$store.state.app.workshopArrow;
    },
  },
  mounted() {
    this.delay = this.srceenDelay;
    this.workDelay = this.workshopDelay;
    this.arrow = this.workshopArrow;
    this.getDetails();
  },
  methods: {
    // 切换tab
    changeTab(e) {
      if (e.name == "erp") {
        this.isAuth("screen:workshop_erp_name:query", () => this.getErpName());
      } else if (["workshop", "environment"].includes(e.name)) {
        this.getDetails();
      }
    },
    // 获取链接地址
    getDetails() {
      this.loading = false;
      this.isAuth("screen:config:query", () => {
        getRealTimeEnvironmental().then((res) => {
          if (res.code == 200) {
            this.editFrom = res.data;
          }
        });
      });
    },
    // 保存更新频率
    saveDelay() {
      this.$store.dispatch("app/setSrceenDelay", this.delay);
      this.$cache.local.set("srceen-delay", this.delay);

      this.$store.dispatch("app/setWorkshopDelay", this.workDelay);
      this.$cache.local.set("workshop-delay", this.workDelay);

      this.$store.dispatch("app/setWorkshopArrow", this.arrow);
      this.$cache.local.set("workshop-arrow", this.arrow);

      this.$message.success("保存成功");
    },
    /** 提交按钮 */
    submitForm() {
      this.loading = true;
      realTimeEnvironmentalSave(this.editFrom)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.getDetails();
          }
        })
        .finally(() => {
          this.loading = false;
          this.percent = 0;
        });
    },
    // 上传进度
    onProgress(e) {
      this.loading = true;
      this.percent = parseInt(e.percent);
    },
    // 上传成功
    onSuccess(res) {
      this.editFrom.publicizeUrl = res.data.url;
      this.submitForm();
    },
    // 获取车间大屏对应ERP工序名称
    getErpName() {
      getWorkshopErpName().then((res) => {
        this.erpList = res.data;
      });
    },
    // 失去焦点
    erpFocus(row) {
      if (this.tempData.id) {
        let index = this.erpList.findIndex((item) => item.id == this.tempData.id);
        this.erpList[index].erpValue = this.tempData.erpValue;
      }
      this.tempData = Object.assign({}, row);
    },
    // 保存ERP工序
    saveErp(row) {
      if (row.erpValue == "") {
        this.$message.warning("ERP工序名称不能为空");
        return;
      }
      updateWorkshopErpName(row).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.msg);
          this.tempData = {};
          this.getErpName();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.video-preview {
  width: 40%;
  min-width: 400px;
  margin-right: 20px;
  max-height: 400px;
  object-fit: cover;
}
::v-deep .el-table {
  .cell {
    padding: 0 !important;
    .el-input__inner {
      border: none !important;
      border-radius: 0;
    }
  }
  .el-table__cell {
    padding: 0 !important;
  }
}
</style>
